<template>
	<!-- 推广海报 -->
	<view class="promotional-poster">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left" @click="goBack">
				<uni-icons type="back" size="24" color="#fff"></uni-icons>
			</view>
			<view class="navbar-title">推广海报</view>
			<view class="navbar-right"></view>
		</view>
		
		<!-- 主要内容区域 -->
		<view id="promotional" @longpress="handleLongPressEvent" 
			style="position: relative; width: 100%; height: 100vh; overflow: hidden;">
			<!-- 背景图 -->
			<image v-if="backgroundImageLoaded" class="background" src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/tghb_bg.png"
				mode="scaleToFill" style="width: 100%; height: 100%;"></image>
			<view v-if="backgroundImageLoaded" class="promotional-poster-main" style="width: 100%; height: 100%;">
				<view class="main-bottom" style="width: 100%;">
					<image :src="userInfo.avatar?userInfo.avatar:'/static/images/head_default.png'" mode="widthFix"
						class="image-avatar"></image>
					<view class="main-bottom-text">
						<view class="text1">
							{{ userInfo.realName }} 推荐你使用超享圈
						</view>
						<view class="text2">长按扫码，立即加入</view>
						<view class="text2">有效期永久</view>
					</view>
					<image :src="codeImg" mode="widthFix" class="img"></image>
				</view>
			</view>
		</view>

		<!-- 加载遮罩 -->
		<view v-if="!backgroundImageLoaded" class="loading-mask">
			<view class="loading-content">
				<view class="loading-spinner"></view>
				<text class="loading-text">正在加载背景图片，请稍候...</text>
			</view>
		</view>
		
		<!-- 错误提示 -->
		<view v-if="loadError" class="error-mask">
			<view class="error-content">
				<text>加载失败，请检查网络连接</text>
				<button @click="retryLoad">重试</button>
			</view>
		</view>
		
		<!-- 自定义弹出框 -->
		<view class="custom-modal" v-if="showModal">
			<view class="modal-mask" @click="closeModal"></view>
			<view class="modal-content">
				<view class="modal-item" @click="saveToAlbum">
					<text>保存到手机</text>
				</view>
				<view class="modal-item" @click="handleShare">
					<text>分享给好友</text>
				</view>
				<view class="modal-item" @click="navigateToCenter">
					<text>识别二维码并跳转</text>
				</view>
				<view class="modal-cancel" @click="closeModal">
					<text>取消</text>
				</view>
			</view>
		</view>
		<!-- 	<view class="bottom">
			<text class="text-bg">1</text>保存推广海报<uni-icons type="right" size="12"></uni-icons>
			<text class="text-bg">2</text>
			<button open-type="share" class="share-button" @click="handleShare">发送给好友扫码注册</button>
			<uni-icons type="right" size="12"></uni-icons>
			<text class="text-bg">3</text>加入你的团队
		</view> -->

		<!-- 在页面底部添加一个隐藏的canvas -->
		<canvas id="posterCanvas" canvas-id="posterCanvas"
			style="position: absolute; top: -9999px; width: 750rpx; height: 1334rpx;"
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}">
		</canvas>
	</view>
</template>

<script>
	import {
		parseDate
	} from '@/utils/date.js';

	export default {
		data() {
			return {
				posterImage: '',
				canvasWidth: 750,
				canvasHeight: 1334,
				imagesLoaded: false,
				dateTime: '',
				codeImg: '',
				isInitLoading: false,
				loadError: false,
				hasPermission: false,
				isProcessing: false,
				showModal: false,
				lastSaveTime: 0,
				lastLongPressTime: 0,
				kefu: '',
				lastGeneratedTime: 0,
				cacheExpireTime: 30 * 24 * 60 * 60 * 1000, // 缓存30天
				initPromise: null,
				canLongPress: true,
				posterReady: true, // 默认设为true，让页面先显示
				backgroundImageLoaded: false, // 添加背景图片加载状态
			}
		},
		onLoad() {
			// 设置分享配置
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});

			// 首次加载时初始化
			this.initOnce();
		},
		onShow() {
			console.log('页面显示，当前状态：', {
				isInitLoading: this.isInitLoading,
				isProcessing: this.isProcessing,
				posterImage: !!this.posterImage,
				lastGeneratedTime: this.lastGeneratedTime
			});

			// 重置加载状态
			this.resetLoadingState();
			this.canLongPress = true;

			// 从Vuex中获取缓存的图片和二维码
			const cachedPoster = this.$store.state.poster?.cachedPoster;
			const cachedQrCode = this.$store.state.poster?.cachedQrCode;

			if (cachedPoster && cachedQrCode) {
				console.log('从Vuex中获取缓存的图片和二维码');
				this.posterImage = cachedPoster;
				this.codeImg = cachedQrCode;
				this.isInitLoading = false;
				this.isProcessing = false;
				return;
			}

			// 没有缓存的图片，延迟后开始生成
			console.log('没有缓存的图片，延迟后开始生成');
			setTimeout(() => {
				this.initOnce();
			}, 1000); // 增加延迟到1秒
		},
		onHide() {
			// 页面隐藏时重置状态
			this.resetLoadingState();
		},
		onUnload() {
			// 页面卸载时重置所有状态
			this.resetState();
		},
		mounted() {
			this.preloadImages();
			this.loadBackgroundImage();
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},

		methods: {
			// 修改resetLoadingState方法
			resetLoadingState() {
				console.log('重置加载状态');
				this.isInitLoading = false;
				this.isProcessing = false;

				// 清除可能存在的定时器
				if (this.resetTimer) {
					clearTimeout(this.resetTimer);
				}
			},

			// 修改initOnce方法
			async initOnce() {
				console.log('开始initOnce');

				// 如果已经有缓存的图片，直接返回
				const cachedPoster = this.$store.state.poster?.cachedPoster;
				if (cachedPoster) {
					console.log('已有缓存的图片，跳过初始化');
					this.posterImage = cachedPoster;
					return;
				}

				// 如果已经在处理中，返回现有的Promise
				if (this.initPromise) {
					console.log('已有初始化进行中，等待完成');
					return this.initPromise;
				}

				// 如果正在处理中，直接返回
				if (this.isProcessing) {
					console.log('正在处理中，跳过初始化');
					return;
				}

				try {
					this.isProcessing = true;
					this.isInitLoading = true;

					// 创建新的初始化Promise
					this.initPromise = this.init();
					await this.initPromise;

					this.lastGeneratedTime = Date.now();
					console.log('初始化成功，图片已缓存');
				} catch (error) {
					console.error('初始化失败:', error);
					this.loadError = true;
				} finally {
					// 清理状态
					this.initPromise = null;
					this.resetLoadingState();
				}
			},

			// 修改init方法
			async init() {
				console.log('开始初始化');
				try {
					this.loadError = false;
					this.posterReady = false; // 确保在生成完成前不显示内容

					// env_version: 'release'// 正式版 develop开发板  trial体验版
					// 获取二维码
					let data3 = {
						page: 'pages/index/index',
						scene: this.userInfo.guid,
						env_version: 'release'
					}
					const res3 = await this.$api.getQrcode(data3)

					if (res3.succ) {
						// 处理二维码图片
						if (res3.data.startsWith('data:image')) {
							this.codeImg = res3.data;
						} else {
							// 将base64转换为临时文件
							const tempFilePath = await new Promise((resolve, reject) => {
								uni.getFileSystemManager().writeFile({
									filePath: `${uni.env.USER_DATA_PATH}/qrcode.png`,
									data: res3.data,
									encoding: 'base64',
									success: () => resolve(`${uni.env.USER_DATA_PATH}/qrcode.png`),
									fail: reject
								});
							});
							this.codeImg = tempFilePath;
							console.log('this.codeImg', this.codeImg)
						}

						// 缓存二维码
						this.$store.commit('poster/SET_CACHED_QRCODE', this.codeImg);

						console.log('预加载图片');
						await this.preloadImages();

						console.log('生成海报');
						await this.generatePoster();
						this.kefu = this.posterImage;
						this.imagesLoaded = true;
						this.lastGeneratedTime = Date.now();
						this.posterReady = true; // 生成完成后显示内容

						console.log('初始化完成，重置状态');
						this.resetLoadingState();

					} else {
						throw new Error('获取二维码失败');
					}
				} catch (error) {
					console.error('初始化失败:', error);
					this.loadError = true;
					this.posterReady = false;
					uni.showToast({
						title: '初始化失败，请重试',
						icon: 'none'
					});
					throw error;
				}
			},

			// 修改获取节点信息的方法
			async getNodeInfo() {
				return new Promise((resolve, reject) => {
					// 使用setTimeout确保DOM更新完成
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#promotional')
							.boundingClientRect()
							.exec((res) => {
								if (res && res[0] && res[0].width > 0 && res[0].height > 0) {
									console.log('获取节点信息成功:', res[0]);
									resolve(res[0]);
								} else {
									console.error('获取节点信息失败，重试中...', res);
									// 如果获取失败，延迟后重试
									setTimeout(() => {
										this.getNodeInfo().then(resolve).catch(reject);
									}, 500);
								}
							});
					}, 1000); // 增加初始延迟到1秒
				});
			},

			// 修改generatePoster方法
			async generatePoster() {
				console.log('开始生成海报');
				const that = this;

				try {
					// 检查必要的数据是否存在
					if (!this.codeImg) {
						console.error('二维码图片未准备好');
						throw new Error('二维码图片未准备好');
					}

					// 获取系统信息
					const sysInfo = await new Promise((resolve, reject) => {
						try {
							const info = uni.getSystemInfoSync();
							console.log('获取系统信息成功:', info);
							resolve(info);
						} catch (error) {
							console.error('获取系统信息失败:', error);
							reject(new Error('获取系统信息失败'));
						}
					});

					const dpr = sysInfo.pixelRatio || 1;
					console.log('系统像素比:', dpr);

					// 使用固定尺寸
					const fixedWidth = 375; // 标准宽度
					const fixedHeight = 750; // 标准高度
					console.log('使用固定尺寸:', { width: fixedWidth, height: fixedHeight });

					// 创建离屏canvas
					const canvas = uni.createOffscreenCanvas({
						type: '2d',
						width: fixedWidth * dpr,
						height: fixedHeight * dpr
					});

					if (!canvas) {
						console.error('创建canvas失败');
						throw new Error('创建canvas失败');
					}

					const ctx = canvas.getContext('2d');
					if (!ctx) {
						console.error('获取canvas上下文失败');
						throw new Error('获取canvas上下文失败');
					}

					// 设置canvas尺寸和缩放
					that.canvasWidth = fixedWidth * dpr;
					that.canvasHeight = fixedHeight * dpr;
					ctx.scale(dpr, dpr);

					console.log('开始下载背景图片');
					// 下载并绘制背景图片
					const bgImagePath = await new Promise((resolve, reject) => {
						uni.downloadFile({
							url: 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/tghb_bg.png',
							success: (res) => {
								console.log('背景图片下载结果:', res.statusCode);
								if (res.statusCode === 200) {
									resolve(res.tempFilePath);
								} else {
									console.error('下载背景图片失败，状态码:', res.statusCode);
									reject(new Error('下载背景图片失败'));
								}
							},
							fail: (error) => {
								console.error('背景图片下载失败:', error);
								reject(new Error('下载背景图片失败'));
							}
						});
					});

					console.log('开始绘制背景');
					// 绘制背景
					await new Promise((resolve, reject) => {
						try {
							const img = canvas.createImage();
							img.onload = () => {
								try {
									ctx.drawImage(img, 0, 0, fixedWidth, fixedHeight);
									console.log('背景绘制完成');
									resolve();
								} catch (error) {
									console.error('绘制背景图片失败:', error);
									reject(new Error('绘制背景图片失败'));
								}
							};
							img.onerror = () => {
								console.error('背景图片加载失败');
								reject(new Error('背景图片加载失败'));
							};
							img.src = bgImagePath;
						} catch (error) {
							console.error('创建背景图片对象失败:', error);
							reject(new Error('创建背景图片对象失败'));
						}
					});

					// 处理头像
					const avatarPath = this.userInfo.avatar || '/static/images/head_default.png';
					console.log('头像路径:', avatarPath);

					// 绘制头像 - 调整位置
					const avatarSize = 50;
					const avatarX = 20;
					const avatarY = fixedHeight - 140 + 50; // 往下移40px

					console.log('开始绘制头像');
					await new Promise((resolve) => {
						try {
							const img = canvas.createImage();
							img.onload = () => {
								try {
									ctx.save();
									ctx.beginPath();
									ctx.arc(avatarX + avatarSize/2, avatarY + avatarSize/2, avatarSize/2, 0, Math.PI * 2);
									ctx.clip();
									ctx.drawImage(img, avatarX, avatarY, avatarSize, avatarSize);
									ctx.restore();
									console.log('头像绘制完成');
								} catch (error) {
									console.error('头像绘制出错:', error);
								}
								resolve();
							};
							img.onerror = () => {
								console.error('头像加载失败');
								resolve();
							};
							img.src = avatarPath;
						} catch (error) {
							console.error('创建头像图片对象失败:', error);
							resolve();
						}
					});

					console.log('开始绘制文本');
					// 绘制文本 - 调整位置
					try {
						const textX = avatarX + avatarSize + 12;
						ctx.fillStyle = '#FFEFD9';
						
						// 绘制名字和推荐文本 - 调整位置
						ctx.font = 'bold 15px sans-serif';
						ctx.fillText(`${that.userInfo.realName} 推荐你使用超享圈`, textX, avatarY + 8);

						// 绘制其他文本 - 调整位置
						ctx.font = '13px sans-serif';
						ctx.fillStyle = 'rgba(255, 239, 217, 0.8)';
						ctx.fillText('长按扫码，立即加入', textX, avatarY + 40);
						ctx.fillText('有效期永久', textX, avatarY + 60);
						console.log('文本绘制完成');
					} catch (error) {
						console.error('绘制文本失败:', error);
					}

					console.log('开始绘制二维码');
					// 绘制二维码 - 调整位置
					const qrSize = 80;
					const qrX = fixedWidth - qrSize - 25;
					const qrY = avatarY + (avatarSize - qrSize) / 2;

					try {
						await new Promise((resolve, reject) => {
							const img = canvas.createImage();
							img.onload = () => {
								try {
									// 创建圆形二维码
									ctx.save();
									ctx.beginPath();
									ctx.arc(qrX + qrSize/2, qrY + qrSize/2, qrSize/2, 0, Math.PI * 2);
									ctx.clip();
									ctx.drawImage(img, qrX, qrY, qrSize, qrSize);
									ctx.restore();
									console.log('二维码绘制完成');
									resolve();
								} catch (error) {
									console.error('绘制二维码失败:', error);
									reject(error);
								}
							};
							img.onerror = (error) => {
							};
							img.src = that.codeImg;
						});
					} catch (error) {
						console.error('二维码处理失败:', error);
						throw error;
					}

					console.log('开始导出图片');
					// 导出图片
					const tempFilePath = await new Promise((resolve, reject) => {
						uni.canvasToTempFilePath({
							canvas: canvas,
							width: that.canvasWidth,
							height: that.canvasHeight,
							destWidth: that.canvasWidth,
							destHeight: that.canvasHeight,
							fileType: 'png',
							quality: 1,
							success: (res) => {
								console.log('导出图片成功，路径:', res.tempFilePath);
								resolve(res.tempFilePath);
							},
							fail: (error) => {
								console.error('导出图片失败:', error);
								reject(new Error('导出图片失败'));
							}
						});
					});

					// 更新图片路径
					that.posterImage = tempFilePath;

					// 将生成的图片存储到Vuex中
					this.$store.commit('poster/SET_CACHED_POSTER', tempFilePath);

					console.log('海报生成完成并已缓存到Vuex');

				} catch (error) {
					console.error('生成海报失败:', error);
					throw error;
				}
			},

			// 修改模板中的长按事件绑定
			handleLongPressEvent(e) {
				// 阻止事件冒泡
				e && e.stopPropagation && e.stopPropagation();

				if (!this.canLongPress) {
					console.log('长按事件被禁用');
					return;
				}

				// 临时禁用长按
				this.canLongPress = false;
				setTimeout(() => {
					this.canLongPress = true;
				}, 1000);

				this.handleLongPress();
			},

			// 修改handleLongPress方法
			async handleLongPress() {
				console.log('触发长按事件，当前状态：', {
					isProcessing: this.isProcessing,
					isInitLoading: this.isInitLoading,
					posterReady: this.posterReady,
					hasImage: !!this.posterImage
				});

				try {
					// 如果正在处理中，显示提示
					if (this.isProcessing || this.isInitLoading) {
						uni.showToast({
							title: '正在生成，请稍后',
							icon: 'none'
						});
						return;
					}

					// 确保有图片路径才进行预览
					if (this.posterImage) {
						console.log('开始预览图片');
						uni.previewImage({
							urls: [this.posterImage],
							current: this.posterImage,
							success: () => {
								console.log('预览成功');
							},
							fail: (err) => {
								console.error('预览失败:', err);
								uni.showToast({
									title: '预览失败，请重试',
									icon: 'none'
								});
							}
						});
					} else {
						uni.showToast({
							title: '正在生成，请稍后',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('长按处理失败:', error);
					uni.showToast({
						title: '正在生成，请稍后',
						icon: 'none'
					});
				} finally {
					this.resetLoadingState();
				}
			},

			// 修改保存到相册方法
			saveToAlbum() {
				if (!this.posterImage) {
					uni.showToast({
						title: '请先生成海报图片',
						icon: 'none'
					});
					return;
				}

				// 检查保存间隔
				const now = Date.now();
				if (now - this.lastSaveTime < 1000) {
					uni.showToast({
						title: '操作太频繁，请稍后再试',
						icon: 'none'
					});
					return;
				}

				uni.saveImageToPhotosAlbum({
					filePath: this.posterImage,
					success: () => {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
						this.lastSaveTime = now;
						this.closeModal();
					},
					fail: (err) => {
						console.error('保存失败', err);
						if (err.errMsg.includes('auth deny')) {
							uni.showModal({
								title: '提示',
								content: '需要相册权限才能保存图片，请授权',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting();
									}
								}
							});
						} else {
							uni.showToast({
								title: '保存失败，请重试',
								icon: 'none'
							});
						}
						this.closeModal();
					}
				});
			},

			// 修改关闭弹出框方法
			closeModal() {
				this.showModal = false;
				// 不重置状态，保持当前图片
			},

			// 添加跳转方法
			navigateToCenter() {
				this.closeModal();
				uni.navigateTo({
					url: '/pages/my-center/my-center'
				});
			},

			// 修改重置状态方法
			resetState() {
				// 不清除posterImage，保留长期缓存
				this.codeImg = '';
				this.imagesLoaded = false;
				this.isProcessing = false;
				this.showModal = false;
				this.lastSaveTime = 0;
				this.lastLongPressTime = 0;
				this.isInitLoading = false;
				this.loadError = false;
				this.posterReady = false;
				this.initPromise = null;
			},

			// 添加handleShare方法
			handleShare() {
				if (!this.posterImage) {
					uni.showToast({
						title: '请先生成海报图片',
						icon: 'none'
					});
					return;
				}

				// 在小程序中触发分享
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});

				// 设置分享内容
				uni.updateShareMenu({
					withShareTicket: true,
					success: () => {
						uni.showToast({
							title: '点击右上角分享',
							icon: 'none'
						});
					}
				});
			},

			// 添加onShareAppMessage方法
			onShareAppMessage() {
				return {
					title: `${this.userInfo.realName} 邀请你加入超享圈`,
					path: `/pages/index/index?scene=${this.userInfo.guid}`,
					imageUrl: this.posterImage
				};
			},

			// 修改重试方法
			retryLoad() {
				this.init();
			},

			getDateTime() {
				// 获取当前日期
				const currentDate = new Date();

				// 加上20天
				currentDate.setDate(currentDate.getDate() + 20);

				// 格式化日期为YYYY-MM-dd
				const year = currentDate.getFullYear();
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(currentDate.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},

			// 修改preloadImages方法
			async preloadImages() {
				const images = [
					'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/tghb_img.png',
					'/static/images/head_default.png'
				];

				try {
					await Promise.all(images.map(src => {
						if (!src) return Promise.resolve();
						return new Promise((resolve, reject) => {
							if (src.startsWith('http')) {
								uni.downloadFile({
									url: src,
									success: (res) => {
										if (res.statusCode === 200) {
											resolve(res.tempFilePath);
										} else {
											console.warn(`下载图片失败: ${src}`);
											resolve();
										}
									},
									fail: (err) => {
										console.warn(`下载图片失败: ${src}`, err);
										resolve();
									}
								});
							} else {
								uni.getImageInfo({
									src: src,
									success: resolve,
									fail: (err) => {
										console.warn(`预加载图片失败: ${src}`, err);
										resolve();
									}
								});
							}
						});
					}));
				} catch (error) {
					console.error('图片预加载失败', error);
				}
			},

			// 添加返回方法
			goBack() {
				uni.navigateBack();
			},

			// 修改背景图片加载方法
			loadBackgroundImage() {
				uni.downloadFile({
					url: 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/tghb_bg.png',
					success: (res) => {
						if (res.statusCode === 200) {
							uni.getImageInfo({
								src: res.tempFilePath,
								success: () => {
									this.backgroundImageLoaded = true;
								},
								fail: (err) => {
									console.error('获取图片信息失败:', err);
									this.loadError = true;
								}
							});
						} else {
							console.error('下载背景图片失败，状态码:', res.statusCode);
							this.loadError = true;
						}
					},
					fail: (err) => {
						console.error('下载背景图片失败:', err);
						this.loadError = true;
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.promotional-poster {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.custom-navbar {
			position: fixed;
			top: 88rpx;
			left: 0;
			right: 0;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 999;
			background-color: transparent;
			padding: 0 15px;

			.navbar-left {
				width: 24px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.navbar-title {
				font-size: 18px;
				color: #fff;
				font-weight: 500;
			}

			.navbar-right {
				width: 24px;
			}
		}

		.background {
			z-index: 1;
			position: relative;
			width: 100%;
			height: 100%;
		}

		.promotional-poster-main {
			z-index: 2;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;

			.main-bottom {
				position: absolute;
				width: 100%;
				bottom: 20rpx;
				display: flex;
				align-items: center;
				padding: 30rpx 0;
				border-radius: 0 0 10rpx 10rpx;

				.image-avatar {
					width: 114rpx;
					height: 114rpx;
					border: 3rpx solid #FFD46D;
					border-radius: 100%;
					margin-left: 30rpx;
				}

				.main-bottom-text {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin: 0 20rpx;

					.text1 {
						display: flex;
						align-items: center;
						font-size: 30rpx;
						color: #FFEFD9;
						margin-bottom: 30rpx;

					}

					.text2 {
						font-size: 28rpx;
						color: #FFEFD9;
						padding: 5rpx 0;
					}
				}

				.img {
					width: 170rpx;
					height: 170rpx;
					border-radius: 100%;
					margin-right: 30rpx;
				}
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 50rpx 40rpx;
			background: #fff;
			border-radius: 12rpx 12rpx 0 0;
			font-size: 24rpx;
			color: #444;

			.text-bg {
				width: 28rpx;
				height: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 6rpx;
				color: #fff;
				font-size: 22rpx;
				background: #529af2;
				border-radius: 100%;
				opacity: .9;
			}

			.uni-icons {
				margin: 0 8rpx;
			}
		}

		.loading-mask,
		.error-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(255, 255, 255, 0.95);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;

			.loading-content,
			.error-content {
				text-align: center;
			}

			.error-content button {
				margin-top: 20rpx;
			}

			.share-button {
				display: inline;
				background: none;
				border: none;
				padding: 0;
				margin: 0;
				font-size: 24rpx;
				color: #444;
				line-height: 1;
				vertical-align: baseline;
			}
		}

		.loading-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.loading-spinner {
				width: 60rpx;
				height: 60rpx;
				border: 4rpx solid #f3f3f3;
				border-top: 4rpx solid #529af2;
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-bottom: 20rpx;
			}

			.loading-text {
				font-size: 28rpx;
				color: #666;
				margin-top: 20rpx;
			}
		}

		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

		// 添加自定义弹出框样式
		.custom-modal {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 999;

			.modal-mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.5);
			}

			.modal-content {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				background: #fff;
				border-radius: 20rpx 20rpx 0 0;
				padding: 20rpx 0;

				.modal-item {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #333;
					border-bottom: 1rpx solid #eee;

					&:active {
						background-color: #f5f5f5;
					}
				}

				.modal-cancel {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #999;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>